<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.inputFileWrapper label{
            display: block;
            float: left;
            position: relative;
        }
        .inputFileWrapper input[type="file"]{
            position: absolute;
            width: 1px;
            height: 1px;
            clip:rect(0,0,0,0);
        }
        .inputFileWrapper .custorm-style{
            display: block;
            width: 390px;
            height: 50px;
        }
        .inputFileWrapper .custorm-style .left-button{
            width: 80px;
            line-height: 50px;
            background: #008ac7;
            color: #fff;
            display: block;
            text-align: center;
            float: left;
        }
        .inputFileWrapper .custorm-style .right-text{
            width: 300px;
            height: 40px;
            line-height: 50px;
            display: block;
            float: right;
            padding: 4px;
            border: 1px solid #008ac7;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
           
        }
		</style>
	</head>
	<body>
		<div class="inputFileWrapper">
    <label for="inputFile">
        <input type="file" id="inputFile"/>
        <span class="custorm-style">
            <span class="left-button">请选择excl文件</span>
            <span class="right-text" id="rightText"></span>
        </span>
    </label>
</div>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
<script>
    var fileBtn = $("input[type=file]");
    fileBtn.on("change", function(){
    	console.info($(this).val());
        var index = $(this).val().lastIndexOf("\\");
        var sFileName = $(this).val().substr((index+1));
        $("#rightText").html(sFileName);
    });
</script>
	</body>
</html>
